<template>
<!--编写html结构-->
    <div>
        <div v-for="student in students" :key="student.name">
            <p id="p1">学生姓名:{{student.name}}</p>
            <p>学生年龄:{{student.age}}</p>
            <p>学生专业:{{student.major}}</p>
            <p>---------------------------------</p>

        </div>
        <button @click="total">统计学生的个数</button>
    </div>
</template>

<script>
 /*编写js代码*/
 export default {
     name:'Student',
     data() {
         return {
             students:[
                 {
                     name:'xiaoming',
                     age:20,
                     major:'java'

                 },
                 {
                     name:'jack',
                     age:20,
                     major:'java'
                 },
                 {
                     name:'xiaohei',
                     age:20,
                     major:'web'
                 }
             ]
         }
     },
     methods: {
         total(){ //  统计学生的个数
             console.log("========子组件中的函数 total()被调用===========")
             console.log(this.students.length)
             // 调用父组件中传递的函数
             // this.gettotal(this.students.length)
             this.$emit('gettotal',this.students.length)
         }
     }

 }

</script>

<style scoped>
/*编写css样式*/
#p1{
    color: red;
}
</style>
